<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>event</title>
		<style>
			div{
				width: 300px;
				height: 400px;
				line-height:100px;
				text-align:center;
				color:white;
				border:1px green solid;
			}
			img{
				width: 300px;
				height: 400px;
				object-fit:cover;
				object-position:center;
			}
			.bigger{
				transform:scale(1.5);
				opacity:1;
				transition:all 1s;
			}
			.smaller{
				transform:scale(1);
				opacity:.5;
				transition:all 1s;
			}
		</style>
		
	</head>
	<body>
		<div><img src="img/1.webp" alt="" /></div>
		<div><img src="img/2.webp" alt="" /></div>
		<div><img src="img/3.webp" alt="" /></div>
		<script>
			var img1 = document.getElementsByTagName('img')[0];
			img1.addEventListener('mouseover',fun1);
			img1.addEventListener('mouseout',fun2);
			function fun1(){
				this.classList.remove("smaller");
				this.classList.add("bigger");
				
			}
			function fun2(){
				this.classList.remove("bigger");
				this.classList.add("smaller");
				
			}
		</script>
	</body>
</html>